<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :sm="24" :md="24" :xxl="16">
            <a-form-item label="区域">
              <a-row :gutter="5" type="flex">
                <a-col :span="3">
                  <a-select
                    placeholder="省"
                    v-model="queryParam.provinceCode"
                    @change="e => addressChange(e, 'cityOptions', 'province')"
                  >
                    <a-select-option v-for="item in provinceOptions" :key="item.name" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-col>
                <a-col :span="3">
                  <a-select
                    placeholder="市"
                    v-model="queryParam.cityCode"
                    @change="e => addressChange(e, 'areaOptions', 'city')"
                  >
                    <a-select-option v-for="item in cityOptions" :key="item.name" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-col>
                <a-col :span="3">
                  <a-select
                    placeholder="区"
                    v-model="queryParam.areaCode"
                    @change="e => addressChange(e, 'streetOptions', 'area')"
                  >
                    <a-select-option v-for="item in areaOptions" :key="item.name" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-col>
                <a-col :span="3">
                  <a-select
                    placeholder="街道"
                    v-model="queryParam.streetCode"
                    @change="e => addressChange(e, '', 'street')"
                  >
                    <a-select-option v-for="item in streetOptions" :key="item.name" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-col>
                <a-col :span="4">
                  <a-select
                    placeholder="商家"
                    v-model="queryParam.businessId"
                    @change="e => agentChange(e, 'networkOptions', 'agentCode')"
                  >
                    <a-select-option v-for="item in agentOptions" :key="item.name" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-col>
                <a-col :span="4">
                  <a-select
                    placeholder="网点"
                    v-model="queryParam.networkId"
                    @change="e => agentChange(e, 'deviceOptions', 'networkCode')"
                  >
                    <a-select-option v-for="item in networkOptions" :key="item.name" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-col>
                <a-col :span="4">
                  <a-select placeholder="设备" v-model="queryParam.deviceId">
                    <a-select-option v-for="item in deviceOptions" :key="item.name" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-col>
              </a-row>
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="周期">
              <j-dict-select-tag
                allowClear
                v-model="queryParam.periodType"
                placeholder="请选择"
                dictCode="periodType"
              />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="时间">
              <a-range-picker allowClear class="per100" v-model="tempTimes" @change="timeChange" />
            </a-form-item>
          </a-col>

          <a-col :sm="24" :md="12" :xl="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery(defaultQueryParam)" icon="search">查询</a-button>
              <a-button @click="searchReset()" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator mt10">
      <a-button type="primary" icon="download" @click="handleExportXls('业务统计')">导出</a-button>
    </div>

    <!-- table区域 -->
    <a-table
      ref="table"
      bordered
      size="middle"
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :loading="loading"
      :scroll="{ x: 1200 }"
      :pagination="false"
    >
    </a-table>
  </a-card>
</template>

<script>
import store from '@/store/'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction } from '@/api/manage'
import Api from '@/api/statisticsManage/statistics'
import * as dayjs from 'dayjs'
export default {
  name: 'Statistics',
  mixins: [JeecgListMixin],
  data() {
    return {
      url: {
        list: '',
        exportXlsUrl: ''
      },
      columns: [],
      disableMixinCreated: true,
      defaultQueryParam: {
        periodType: 'day',
        startTime: dayjs()
          .subtract(30, 'day')
          .format('YYYY-MM-DD'),
        endTime: dayjs().format('YYYY-MM-DD')
      },
      role: 'agent_maintain' // admin(admin,developer),business(business, agent),agent_maintain
    }
  },
  created() {
    if (this.hasRole('admin') || this.hasRole('developer')) {
      this.url.list = Api.listAdmin
      this.url.exportXlsUrl = Api.exportAdmin
      this.role = 'admin'
      this.columns = [
        {
          title: '维度',
          dataIndex: 'dateTime',
          align: 'center',
          sorter: (a, b) => {
            return a.dateTime - b.dateTime
          }
        },
        {
          title: '订单数',
          dataIndex: 'onlineOrderCount',
          align: 'center',
          sorter: (a, b) => {
            return a.onlineOrderCount - b.onlineOrderCount
          }
        },
        {
          title: '订单金额',
          align: 'center',
          dataIndex: 'onlineOrderAmount',
          sorter: (a, b) => {
            return a.onlineOrderAmount - b.onlineOrderAmount
          }
        },
        {
          title: '订单退款金额',
          align: 'center',
          dataIndex: 'onlineRefundAmount',
          sorter: (a, b) => {
            return a.onlineRefundAmount - b.onlineRefundAmount
          }
        },
        {
          title: '订单用户数',
          align: 'center',
          dataIndex: 'orderUserCount',
          sorter: (a, b) => {
            return a.orderUserCount - b.orderUserCount
          }
        },
        {
          title: '注册用户数',
          align: 'center',
          dataIndex: 'registerUserCount',
          sorter: (a, b) => {
            return a.registerUserCount - b.registerUserCount
          }
        },
        {
          title: '会员充值金额',
          align: 'center',
          dataIndex: 'userRechargeAmount',
          sorter: (a, b) => {
            return a.userRechargeAmount - b.userRechargeAmount
          }
        },
        {
          title: '会员提现金额',
          align: 'center',
          dataIndex: 'userWithdrawalAmount',
          sorter: (a, b) => {
            return a.userWithdrawalAmount - b.userWithdrawalAmount
          }
        }
      ]
    } else if (this.hasRole('business') || this.hasRole('agent')) {
      this.url.list = Api.list
      this.url.exportXlsUrl = Api.export
      this.role = 'business'
      this.columns = [
        {
          title: '维度',
          dataIndex: 'dateTime',
          sorter: (a, b) => {
            return a.dateTime - b.dateTime
          }
        },
        {
          title: '订单数',
          dataIndex: 'onlineOrderCount',
          sorter: (a, b) => {
            return a.onlineOrderCount - b.onlineOrderCount
          }
        },
        {
          title: '订单金额',
          dataIndex: 'onlineOrderAmount',
          sorter: (a, b) => {
            return a.onlineOrderAmount - b.onlineOrderAmount
          }
        },
        {
          title: '订单退款金额',
          dataIndex: 'onlineRefundAmount',
          sorter: (a, b) => {
            return a.onlineRefundAmount - b.onlineRefundAmount
          }
        },
        {
          title: '订单用户数',
          dataIndex: 'orderUserCount',
          sorter: (a, b) => {
            return a.orderUserCount - b.orderUserCount
          }
        },
        {
          title: '注册用户数',
          dataIndex: 'registerUserCount',
          sorter: (a, b) => {
            return a.registerUserCount - b.registerUserCount
          }
        },
        {
          title: '会员充值金额',
          dataIndex: 'userRechargeAmount',
          sorter: (a, b) => {
            return a.userRechargeAmount - b.userRechargeAmount
          }
        },
        {
          title: '会员提现金额',
          dataIndex: 'userWithdrawalAmount',
          sorter: (a, b) => {
            return a.userWithdrawalAmount - b.userWithdrawalAmount
          }
        }
      ]
    }
    this.queryParam = Object.assign({}, this.defaultQueryParam)
    this.loadData()
    this.getAddress('provinceOptions')
  },
  methods: {
    async loadData(arg) {
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      var params = this.getQueryParams() //查询条件
      this.loading = true
      await getAction(this.url.list, params)
        .then(res => {
          if (res.success) {
            let result = []
            result.push({
              dateTime: '合计',
              onlineOrderAmount: res.result.totalOnlineOrderAmount,
              onlineOrderCount: res.result.totalOnlineOrderCount,
              onlineRefundAmount: res.result.totalOrderRefundAmount,
              orderUserCount: res.result.totalOrderUserCount,
              registerUserCount: res.result.totalRegisterUserCount,
              userRechargeAmount: res.result.totalUserRechargeAmount,
              userWithdrawalAmount: res.result.totalUserWithdrawalAmount
            })
            result.push(...res.result.list)
            this.dataSource = result
            // this.ipagination.total = res.result.total
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 创建时间改变
    timeChange(e, arr) {
      if (arr[0]) {
        this.queryParam.startTime = arr[0]
        this.queryParam.endTime = arr[1]
      } else {
        this.queryParam.startTime = undefined
        this.queryParam.endTime = undefined
      }
    },

    hasRole(name) {
      const hasRole = store.getters.roles.find(item => {
        return item.roleCode === name
      })
      return !!hasRole
    }
  }
}
</script>

<style scoped></style>

